<template>
    <Teleport to=".hearder-show">
        <div class="header">
            <div class="back" >
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-back"></use>
                 </svg>
            </div>
            <van-search class="search" v-model="searchInfo" placeholder="请输入搜索关键词" />
            <span @click="searchHandler">搜索</span>
        </div>
        </Teleport>
        <component :is="searchInfo ? searchList : history"></component>
</template>
<script setup lang="ts">
 import {Teleport} from 'vue'
 import searchList from '@/components/search/searchList.vue'
 import { ref, watch, provide } from 'vue'
import { useRouter, type Router } from 'vue-router'
import type { MyHotItem} from '@/config/interface'
import {searchListApi} from '@/api/goods'
import history from './history.vue'


const $goList: Router = useRouter()


 const searchInfo = ref<string>('')
 const searchHandler=()=>{
const info =searchInfo.value.trim()
if(!info)return

$goList.push({ path: '/list', query: { search: info } })

 }

const resList = ref<MyHotItem[]>([])
watch( searchInfo, async ()=>{
    if(!searchInfo.value.trim()) return
    const res= await searchListApi(searchInfo.value.trim())
    resList.value=res.data

})
provide('resList',resList)

</script>
<style scoped lang="scss">
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    >.icon{
        width: 20px;
        height: 20px;
     
    }
    >span{
        width: 40px;
        height: 20px;
        background-color: red;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        align-items: center;
    }
  
}
</style>